<script setup lang="ts">
import { ref, reactive } from "vue";
import MdEditer from "@/components/question/MdEditer.vue";
import CodeEditer from "@/components/question/CodeEditer.vue";
import {
  JudgeConfig,
  QuestionAddRequest,
  QuestionControllerService,
} from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";

const router = useRouter();
const questionRef = reactive({
  answer: "",
  content: "",
  judgeCase: [
    {
      input: "",
      output: "",
    },
  ],
  judgeConfig: {
    memoryLimit: 0,
    stackLimit: 0,
    timeLimit: 0,
  },
  tags: [],
  title: "",
  integral: 0,
} as QuestionAddRequest);

const limit = ref({
  memoryLimit: 0,
  stackLimit: 0,
  timeLimit: 0,
} as JudgeConfig);
const handleAdd = () => {
  questionRef.judgeCase?.push({
    input: "",
    output: "",
  });
};
const handleDelete = (index: number) => {
  questionRef.judgeCase?.splice(index, 1);
};

const getCode = (code: string, language: string) => {
  message.success("代码上成功");
  questionRef.answer = "```" + language + "\n" + code + "\n```";
};

const getText = (text: string) => {
  questionRef.content = text;
  message.success("内容添加成功");
};

const submitQuestion = async () => {
  Object.assign(questionRef.judgeConfig, limit.value);
  const cancelablePromise =
    await QuestionControllerService.addQuestionUsingPost(questionRef);
  if (cancelablePromise.code == 0) {
    message.success("题目创建成功");
    router.replace("/");
  } else {
    message.error("题目创建失败:" + cancelablePromise.message);
  }
};
</script>

<template>
  <a-row>
    <a-col :span="18" :offset="3">
      <div class="question-page">
        <h1>添加题目信息</h1>
        <a-form :model="questionRef" :layout="'vertical'">
          <a-collapse>
            <a-collapse-item header="标题" key="1">
              <a-form-item
                field="title"
                :help="'请输入3个字以上的标题'"
                :validate-status="'warning'"
              >
                <a-input
                  class="input"
                  oncopy="return false"
                  v-model="questionRef.title"
                  placeholder="请输入添加题目的标题"
                />
              </a-form-item>
            </a-collapse-item>
            <a-collapse-item header="标签" :key="2">
              <a-input-tag
                class="input"
                v-model:model-value="questionRef.tags"
                placeholder="请为你的题目添加标签吧"
                :size="'large'"
                allow-clear
              />
            </a-collapse-item>
            <a-collapse-item header="内容" key="3">
              <MdEditer :getText="getText" />
            </a-collapse-item>
            <a-collapse-item header="判题资源限制" key="4">
              <a-row>
                <a-col :span="12">
                  <a-form-item
                    label="内存限制(kb):"
                    field="memory"
                    :help="'请输入数字'"
                    :validate-status="'warning'"
                  >
                    <a-input-number
                      size="large"
                      v-model="limit.memoryLimit"
                      oncopy="return false"
                      placeholder="请输入内存占用"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item
                    label="时间消耗(ms):"
                    field="time"
                    :help="'请输入数字'"
                    style="margin-left: 10px"
                    :validate-status="'warning'"
                  >
                    <a-input-number
                      size="large"
                      v-model="limit.timeLimit"
                      oncopy="return false"
                      placeholder="请输入时间消耗"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-collapse-item>
            <a-collapse-item header="参考答案" key="5">
              <div style="height: 600px">
                <CodeEditer :getCode="getCode" />
              </div>
            </a-collapse-item>
            <a-collapse-item header="积分" key="6">
              <a-form-item :help="'积分不要过大哦,适量为最好,一般在10-100'">
                <a-input-number
                  class="input"
                  :min="10"
                  :max="100"
                  v-model:model-value="questionRef.integral"
                  placeholder="请为你的题目添加积分吧"
                  :size="'large'"
                />
              </a-form-item>
            </a-collapse-item>
            <a-collapse-item header="判题用例" key="7">
              <div class="judgeCaseInfo">
                <a-form
                  :model="questionRef"
                  :style="{ width: '600px' }"
                  style="width: 100%"
                  :layout="'vertical'"
                >
                  <a-alert type="warning">注意回车键,不要乱敲回车键</a-alert>
                  <a-divider />
                  <a-form-item
                    class="form-item"
                    v-for="(caseInfo, index) of questionRef.judgeCase"
                    :field="`judgeCase[${index}].input`"
                    :label="`测试${index + 1}`"
                    :key="index"
                  >
                    <a-row style="width: 100%" :gutter="24">
                      <a-col :span="10">
                        <a-form-item label="输入">
                          <a-textarea
                            class="area"
                            v-model="caseInfo.input"
                            default-value="This is the contents of the textarea. This is the contents of the textarea. This is the contents of the textarea."
                            allow-clear
                            auto-size
                          />
                        </a-form-item>
                      </a-col>
                      <a-col :span="10">
                        <a-form-item label="输出">
                          <a-textarea
                            class="area"
                            color="orange"
                            v-model="caseInfo.output"
                            default-value="This is the contents of the textarea. This is the contents of the textarea. This is the contents of the textarea."
                            allow-clear
                            auto-size
                          />
                        </a-form-item>
                      </a-col>
                      <a-col :span="4">
                        <a-button
                          @click="handleDelete(index)"
                          status="danger"
                          size="large"
                          style="margin-left: 10px; margin-top: 150px"
                          >删除
                        </a-button>
                      </a-col>
                    </a-row>
                  </a-form-item>
                </a-form>
                <div>
                  <a-button
                    size="large"
                    type="primary"
                    status="success"
                    @click="handleAdd"
                    >添加用例
                  </a-button>
                </div>
              </div>
            </a-collapse-item>
          </a-collapse>
          <a-row style="width: 100%">
            <a-col :span="18" :offset="3">
              <a-form-item>
                <a-button
                  style="width: 100%"
                  @click="submitQuestion"
                  class="button"
                  type="primary"
                  >题目提交
                </a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-col>
  </a-row>
</template>

<style scoped>
.input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  width: 100%;
  margin: 0 0 15px;
  padding: 10px 10px 5px 10px;
  box-sizing: border-box;
  font-size: 20px;
  border-radius: 1ch;
  border: 1px solid #f5f5f5;
}

.question-page {
  background-color: white;
  padding: 20px;
  border-radius: 1ch;
  align-items: center;
}

.button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  width: 80%;
  border: 0;
  padding: 15px;
  font-size: 14px;
  cursor: pointer;
  height: 40px;
  border-radius: 1ch;
}

.button:active {
  background: #74c0fc;
}

.judgeCaseInfo {
  background-color: white;
  padding: 30px;
}

.area {
  border: 2px deepskyblue solid;
  border-radius: 2ch;
  min-height: 300px;
}

.form-item {
  width: 100%;
  padding: 10px;
  background-color: #f0f5ff;
  border-radius: 2ch;
}
</style>
